body {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: flex !important;
  flex-direction: column !important;
}

.little-bear-designer {
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  cursor: default;
  position: relative;
  background-color: #fff;
  --fc-drag-empty: '拖拽左侧列表中的组件到此处';
  --fc-child-empty: '点击右下角 \e789  按钮添加一列';
  --fc-tool-border-color: #2e73ff;
}

.little-bear-designer > .el-main {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
}

/* 左边菜单布局 */
.little-bear-left-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid #ececec;
  border-right: 1px solid #ececec;
}

.little-bear-left-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;
  box-sizing: border-box;
}

.little-bear-left-menu-item.active {
  color: #2e73ff;
}

.little-bear-left-menu-form {
  border-bottom: 1px solid #ececec;
}

.little-bear-left-menu-item i {
  font-size: 22px;
}

.little-bear-left-menu-item i:hover {
  color: #2e73ff;
}

.little-bear-left-menu-item .el-badge__content {
  --el-badge-size: 15px;
  --el-badge-padding: 4px;
  background-color: #2e73ff;
}

/* 左侧布局 */

.little-bear-l > .el-container {
  height: 100%;
}

.little-bear-l .el-main {
  padding: 0;
}

.little-bear-l .el-tree-node__label {
  padding: 3px;
  font-weight: 400;
  color: #333;
}

.little-bear-l .el-tree-node__content {
  height: 30px;
  margin-top: 5px;
}

.little-bear-l .el-tree-node__content > .el-tree-node__expand-icon {
  color: #333;
}

.little-bear-l .el-tree-node__expand-icon.is-leaf {
  color: transparent;
}

.little-bear-l-tabs {
  display: flex;
  border-bottom: 1px solid #ececec;
  padding: 0;
}

.little-bear-l-tab {
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  position: relative;
  flex: 1;
  text-align: center;
}

.little-bear-l .little-bear-l-tab.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.little-bear-l-group {
  border: 1px solid #eeeeee;
  padding: 0;
  margin: 12px;
  user-select: none;
}

.little-bear-l-group .little-bear-l-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.little-bear-l-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 12px;
  margin: 0;
}

.little-bear-l-title i {
  font-size: 14px;
}

.little-bear-l-title i.down {
  transform: rotate(90deg);
}

.little-bear-l-item {
  display: inline-block;
  background: #fff;
  color: #000;
  line-height: 1;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  padding-bottom: 10px;
}

.little-bear-l-item i {
  font-size: 21px;
  display: inline-block;
}

.little-bear-l-item .little-bear-l-name {
  font-size: 12px;
}

.little-bear-l-item .little-bear-l-icon {
  padding: 10px 5px 12px;
}

.little-bear-l-item:hover {
  background: #2e73ff;
  color: #fff;
}

/* 添加拖动手柄样式 */
.little-bear-resize {
  width: 0px;
  flex: none;
  position: relative;
  user-select: none;
}

.little-bear-resize .little-bear-resize-dragger {
  cursor: col-resize;
  height: 100%;
  width: 6px;
}

.little-bear-resize .little-bear-resize-dragger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.little-bear-resize .little-bear-resize-dragger::before {
  content: '';
  background: rgba(0, 0, 0, 0.04);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.little-bear-resize .little-bear-resize-dragger::before {
  height: 100%;
  width: 2px;
}

.little-bear-resize .little-bear-resize-dragger::after {
  content: '';
  background: #909399;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.little-bear-resize .little-bear-resize-dragger::after {
  height: 20px;
  width: 2px;
}

.little-bear-resize .little-bear-resize-dragger:hover::before {
  background: #409eff;
}

/* 大纲布局 */
.little-bear-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 26px;
  line-height: 26px;
  padding-right: 5px;
}

.little-bear-tree-node.active,
.little-bear-tree-node.active .icon-more {
  color: #2e73ff;
}

.little-bear-tree-label {
  display: flex;
  align-items: center;
}

.little-bear-tree-label > i {
  margin-right: 5px;
  font-weight: 700;
}

.little-bear-tree-more {
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-weight: 700;
}

/* 开始-中间布局 */

.little-bear-m-tools {
  height: 40px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ececec;
  border-top: 0 none;
  white-space: nowrap;
}

.little-bear-m-tools-l,
.little-bear-m-tools-r {
  display: flex;
  align-items: center;
}

.little-bear-m-tools-r {
  overflow: auto;
}

.little-bear-m-tools-l .devices .fc-icon {
  width: 18px;
  cursor: pointer;
}

.little-bear-m-tools-l .devices .fc-icon.active {
  color: #2e73ff;
}

.little-bear-m-tools-l .devices .fc-icon + .fc-icon {
  margin-left: 5px;
}

.little-bear-m-tools .line {
  width: 1px;
  height: 24px;
  background: #d8d8d8;
  margin: 0 10px;
}

.little-bear-m-tools .el-button {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.little-bear-m-tools .el-button > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.little-bear-m-tools .el-dropdown,
.little-bear-m-tools .el-button + .el-button {
  margin-left: 10px;
}

.little-bear-m-tools .little-bear-m-extend {
  color: #666;
  border-color: #ccc;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 5px;
}

.little-bear-m-tools .little-bear-m-extend .fc-icon {
  margin-right: 0;
}

.little-bear-m-tools .little-bear-input-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.little-bear-m-tools .little-bear-input-btn .el-switch__action {
  width: 18px;
  height: 18px;
  left: 2px;
}

.little-bear-m-tools .little-bear-input-btn .is-checked .el-switch__action {
  --el-color-white: #2e73ff;
  left: calc(100% - 20px);
}

.little-bear-m-tools .little-bear-input-btn .el-switch__core {
  --el-switch-on-color: var(--el-switch-off-color);
  border-radius: 16px;
  height: 24px;
  width: 46px;
}

.little-bear-m-tools .little-bear-input-btn .is-checked .el-switch__core {
  --el-switch-on-color: var(--el-switch-off-color);
  border-radius: 16px;
  height: 24px;
  width: 46px;
}

.little-bear-m-tools-r .fc-icon {
  font-size: 14px;
}

.little-bear-m-tools-l .fc-icon {
  font-size: 18px;
  cursor: pointer;
}

.little-bear-m-tools-l .fc-icon + .fc-icon {
  margin-left: 10px;
}

.little-bear-m-tools-l .fc-icon.disabled {
  color: #999;
  cursor: not-allowed;
}

.little-bear-m-con {
  position: relative;
  background: #f5f5f5;
  padding: 20px 20px 36px;
}

.little-bear-m-input {
  padding: 5px 5px 80px;
}

.little-bear-m-input-handle {
  position: absolute;
  bottom: 17px;
  left: 0;
  right: 0;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  text-align: center;
  margin: 20px;
  z-index: 99;
}

.little-bear-m-drag {
  margin: 0 auto;
  overflow: auto;
  padding: 2px;
  box-sizing: border-box;
}

.little-bear-m-drag.mobile {
  width: 400px;
}

.little-bear-m-drag.pad {
  width: 770px;
}

.little-bear-m-drag,
.draggable-drag {
  background: #fff;
  height: 100%;
  position: relative;
}

.little-bear-m-drag > form,
.little-bear-m-drag > form > .el-row {
  height: 100%;
}

.little-bear-m-drag .el-tree {
  width: 100%;
}

.little-bear-m-drag.little-bear-drop-hover .little-bear-draggable-drag {
  padding-top: 20px;
}

.little-bear-m .little-bear-l-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #000;
  width: 100%;
  margin: 5px 0;
  height: 30px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px dashed #000;
  border-radius: 4px;
  padding-bottom: 0;
}

.little-bear-m .little-bear-l-item .little-bear-l-icon {
  display: inline-block !important;
  padding: 0 4px;
}

.little-bear-m .little-bear-l-item .little-bear-l-name {
  display: inline-block !important;
  font-size: 12px;
}

.little-bear-l,
.little-bear-m,
.little-bear-r {
  border-top: 1px solid #ececec;
  box-sizing: border-box;
}

.little-bear-row {
  width: 100%;
}

.little-bear-draggable-drag.drag-holder,
.little-bear-tableFormColumn-drag.drag-holder,
.little-bear-elTabPane-drag.drag-holder,
.little-bear-group-drag.drag-holder,
.little-bear-subForm-drag.drag-holder,
.little-bear-elCard-drag.drag-holder,
.little-bear-elCollapseItem-drag.drag-holder {
  position: relative;
  background: #f5f5f5;
  background-size: 0;
  min-height: 90px;
}

.little-bear-child-empty:after,
.little-bear-draggable-drag.drag-holder:after,
.little-bear-tableFormColumn-drag.drag-holder:after,
.little-bear-elTabPane-drag.drag-holder:after,
.little-bear-group-drag.drag-holder:after,
.little-bear-subForm-drag.drag-holder:after,
.little-bear-elCard-drag.drag-holder:after,
.little-bear-elCollapseItem-drag.drag-holder:after {
  content: var(--fc-drag-empty);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #aaa;
  font-size: 12px;
}

.little-bear-designer .little-bear-m-drag .little-bear-draggable-drag {
  overflow: auto;
  padding: 2px 2px 100px;
}

.little-bear-m-drag.little-bear-drop-hover .little-bear-draggable-drag {
  padding-top: 20px;
}

.little-bear-draggable-drag.drag-holder {
  background-color: #ffffff;
}

.little-bear-draggable-drag.drag-holder:after {
  font-size: 16px;
}

.little-bear-drag-tool {
  position: relative;
  display: block;
  min-height: 20px;
  box-sizing: border-box;
  padding: 2px;
  outline: 1px dashed var(--fc-tool-border-color);
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  transition: outline-color 0.3s ease;
  z-index: 0;
}

.little-bear-drag-tool.active {
  outline: 2px solid #2e73ff;
}

.little-bear-drag-tool:hover {
  outline-color: #2e73ff;
  outline-style: solid;
  z-index: 1;
}

.little-bear-drag-mask {
  z-index: 1900;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.little-bear-drag-l {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1904;
}

.little-bear-drag-tool.active > div > .little-bear-drag-btn {
  display: flex;
}

.little-bear-drag-tool .little-bear-drag-btn {
  display: none;
}

.little-bear-drag-tool:has(.little-bear-drag-tool:not(.active):hover, .little-bear-drag-tool.active:hover) > div > .little-bear-drag-btn {
  display: none !important;
}

.little-bear-drag-tool:not(.active):hover > div > .little-bear-drag-btn {
  display: flex !important;
  opacity: 0.7;
}

.little-bear-drag-tool .little-bear-drag-tool {
  height: calc(100% - 6px);
  margin: 3px;
}

.little-bear-drag-btn {
  height: 18px;
  width: 18px;
  color: #fff;
  background-color: #2e73ff;
  text-align: center;
  line-height: 20px;
  padding-bottom: 1px;
  float: left;
  cursor: pointer;
  justify-content: center;
}

.little-bear-drag-btn .el-icon {
  height: 18px;
  line-height: 20px;
}

.little-bear-drag-btn + .little-bear-drag-btn {
  margin-left: 2px;
}

.little-bear-drag-box > div > div[data-draggable] {
  margin-bottom: 1px;
}

.little-bear-drag-box > div[data-draggable] {
  margin-bottom: 1px;
}

.little-bear-drag-r {
  position: absolute;
  right: -1px;
  top: calc(100% - 19px);
  background-color: #2e73ff;
  z-index: 1904;
}

.little-bear-r {
  --el-color-primary: #2e73ff;
}

.little-bear-r-tab-props {
  padding: 0 20px;
  position: relative;
}

.little-bear-r .little-bear-group-container + .little-bear-group-container {
  margin-top: 20px;
}

.little-bear-r .little-bear-group-container {
  margin: 0;
  padding: 10px;
}

.little-bear-r .little-bear-group-handle {
  right: 15px;
}

.little-bear-r .el-form-item {
  margin-bottom: 10px !important;
}

.little-bear-r .el-form-item__label {
  color: #333333;
}

.little-bear-r .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #ececec;
}

.little-bear-r .little-bear-r-tabs {
  display: flex;
  padding: 0;
  border-bottom: 1px solid #ececec;
}

.little-bear-r .el-table__cell .cell,
.little-bear-r .el-button,
.little-bear-r .el-radio-button__inner {
  font-weight: 400;
}

.little-bear-r .little-bear-r-tab {
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  position: relative;
  flex: 1;
  text-align: center;
}

.little-bear-r .little-bear-r-tab.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.handle {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.little-bear-t-menu .el-dropdown,
.handle .el-dropdown {
  cursor: pointer;
}

.handle .el-icon {
  margin-left: 0;
}

.form-create {
  width: 100%;
}

.little-bear-r .el-main {
  padding: 10px;
}

.little-bear-color-input {
  width: 100%;
}

.little-bear-color-input .el-input .el-input-group__append {
  padding: 0;
  width: 24px;
}

.little-bear-color-input .el-input .el-color-picker {
  margin: 0;
}

.little-bear-color-input .el-input .el-color-picker__trigger {
  border-left: 0 none;
  border-radius: 0px 3px 3px 0px;
}

.little-bear-color-input .el-color-picker__color {
  background-image:
    linear-gradient(45deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%),
    linear-gradient(135deg, var(--el-color-picker-alpha-bg-a) 25%, var(--el-color-picker-alpha-bg-b) 25%),
    linear-gradient(45deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%),
    linear-gradient(135deg, var(--el-color-picker-alpha-bg-b) 75%, var(--el-color-picker-alpha-bg-a) 75%);
  background-position:
    0 0,
    6px 0,
    6px -6px,
    0 6px;
  background-size: 12px 12px;
}

.little-bear-style-config {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.little-bear-box-space-input ._padding,
.little-bear-box-space-input ._margin {
  width: 100%;
  height: 180px;
  background-color: #f2cea5;
  padding: 40px 55px;
  box-sizing: border-box;
  position: relative;
}

.little-bear-box-space-input .little-bear-input:hover,
.little-bear-box-space-input .little-bear-input:focus {
  background-color: #ececec;
  opacity: 0.9;
  color: #262626;
}

.little-bear-box-space-input .little-bear-input {
  display: inline-block;
  width: 30%;
  max-width: 40px;
  height: 20px;
  border: 0 none;
  padding: 0;
  margin: 0;
  outline: 0 none;
  text-align: center;
  font-size: 12px;
  background-color: unset;
  text-decoration: underline;
}

.little-bear-box-space-input ._padding-title,
.little-bear-box-space-input ._margin-title {
  position: absolute;
  top: 2px;
  left: 4px;
}

.little-bear-box-space-input .little-bear-top,
.little-bear-box-space-input .little-bear-bottom {
  position: absolute;
  left: 50%;
  top: 5px;
  margin-left: -20px;
}

.little-bear-box-space-input .little-bear-left,
.little-bear-box-space-input .little-bear-right {
  position: absolute;
  left: 7px;
  top: 50%;
  margin-top: -10px;
}

.little-bear-box-space-input .little-bear-right {
  left: unset;
  right: 2px;
}

.little-bear-box-space-input .little-bear-bottom {
  top: unset;
  bottom: 15px;
}

.little-bear-box-space-input .little-bear-help {
  display: flex;
  align-items: center;
  position: absolute;
  right: 5px;
  top: 5px;
  color: #aaaaaa;
}

.little-bear-box-space-input ._padding .fc-icon + .fc-icon {
  margin-left: 2px;
}

.little-bear-box-space-input ._padding .fc-icon {
  cursor: pointer;
  color: #262626;
  font-size: 12px;
}

.little-bear-box-space-input .fc-icon.active {
  color: #2e73ff;
}

html.dark .little-bear-box-space-input ._padding,
.little-bear-box-space-input ._margin {
  background-color: #a9855c;
}

.little-bear-box-space-input ._margin {
  width: 100%;
  height: 100px;
  background-color: #c6cf92;
}

.little-bear-box-space-input ._box {
  width: 100%;
  height: 100%;
  background-color: #94b5c0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.little-bear-box-space-input {
  color: #000000;
}

.little-bear-ci-con {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.line-box {
  width: 100%;
  height: 20px;
  padding: 1px;
  box-sizing: border-box;
}

.line-box-con {
  width: 100%;
  height: 100%;
  background: url();
  opacity: 0.3;
}

.little-bear-border-input {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: center;
}

.little-bear-ci-append {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  margin: 5px 3px 3px;
  padding: 4px;
}

.little-bear-border-input .little-bear-bi-left {
  width: 115px;
  height: 115px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.little-bear-border-input .little-bear-bil-row {
  height: 38px;
  display: flex;
  justify-content: center;
}

.little-bear-border-input .little-bear-bil-col {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 8px;
  font-size: 16px;
}

.little-bear-border-input .little-bear-bil-col.active {
  outline: 1px dashed #2e73ff;
  color: #2e73ff;
}

.little-bear-border-input .little-bear-bi-right {
  width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 5px;
}

.little-bear-border-input .little-bear-bi-right .little-bear-color-input {
  width: 140px;
}

.little-bear-size-input {
  display: flex;
  align-items: center;
}

.little-bear-size-input .el-button {
  font-size: 14px;
  padding: 5px;
  margin-left: 3px;
  width: 25px;
}

.little-bear-radius-con {
  display: flex;
  flex-wrap: wrap;
}

.little-bear-radius-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 5px 0;
  box-sizing: border-box;
}

.little-bear-radius-item .little-bear-radius-icon {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.little-bear-radius-item .little-bear-size-input .el-input-number--small {
  width: 70px;
}

.little-bear-size-input .el-input-number--small {
  width: 122px;
}

.little-bear-box-size-input .el-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  grid-column-gap: 10px;
}

.little-bear-box-size-input .el-radio-group {
  width: 100%;
}

.little-bear-box-size-input .el-radio-button {
  flex: 1;
}

.little-bear-box-size-input .el-radio-button__inner {
  width: 100%;
  padding: 4px;
}

.little-bear-r-name-input .icon-copy:hover {
  color: #2e73ff;
}

.little-bear-r-name-input .icon-copy {
  cursor: pointer;
}

.little-bear-r-name-input .el-input-group__append {
  width: 25px;
  padding: 0;
  margin: 0;
  color: #606266;
  cursor: pointer;
}

.little-bear-table-opt {
  width: 100%;
}

.little-bear-table-opt .el-table[data-v-08473b20] {
  z-index: 1;
}

.little-bear-table-opt-handle {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
}

.little-bear-fn-list-r {
  border-left: 0 none;
}

.little-bear-fn-list-l,
.little-bear-fn-list-r {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  border: 1px solid #ececec;
}

.little-bear-fn-list-head {
  display: flex;
  padding: 5px 15px;
  border-bottom: 1px solid #eee;
  background: #f8f9ff;
  align-items: center;
}

.little-bear-fn-list-r .little-bear-fn-list-head {
  justify-content: flex-end;
}

.little-bear-fn-list-l > .el-main,
.little-bear-fn-list-r > .el-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.little-bear-fn-list-con .el-main {
  padding: 0;
}

.little-bear-fn-list-l .el-menu-item {
  height: auto;
  line-height: 1em;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 0;
  margin-top: 5px;
}

.little-bear-fn-list-method {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1em;
  font-family: monospace;
  width: 100%;
  overflow: hidden;
  white-space: pre-wrap;
}

.little-bear-fn-list-l .el-menu {
  padding: 0 10px 5px;
  border-right: 0 none;
  width: 100%;
  border-top: 0 none;
  overflow: auto;
}

.little-bear-fn-list-method-info > span:first-child,
.little-bear-fn-list-method > span:first-child {
  color: #9d238c;
}

.little-bear-event-method > span:first-child,
.little-bear-fn-list-method > span:first-child {
  color: #9d238c;
}

.little-bear-fn-list-method .little-bear-label {
  margin-top: 4px;
  color: #aaaaaa;
  font-size: 12px;
}

.little-bear-fn-list-l .el-menu-item.is-active {
  background: #e4e7ed;
  color: #303133;
}

.little-bear-fn-list-r > .el-main {
  flex-direction: column;
}

.little-bear-fn {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
}

.little-bear-validate {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 5px 3px 10px;
  padding: 4px;
  background-color: #f5f5f5;
}

/* .little-bear-validate-item {
    border-bottom: 1px dashed #ECECEC;
    margin-bottom: 10px;
} */

.little-bear-validate-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.little-bear-validate-title > div {
  display: flex;
  align-items: center;
}

.little-bear-validate-title > div > span {
  width: 16px;
  height: 16px;
  background: #ccc;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  border-radius: 15px;
  margin-right: 5px;
}

.little-bear-validate-item .el-col-12:first-child {
  padding-right: 5px;
}

.little-bear-validate-item .el-input-number {
  width: 100%;
}

.little-bear-event-dialog .el-dialog__body {
  padding: 10px 20px;
}

.little-bear-event-l,
.little-bear-event-r {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  border: 1px solid #ececec;
}

.little-bear-event-l > .el-main,
.little-bear-event-r > .el-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.little-bear-event-con .el-main {
  padding: 0;
}

.little-bear-event-head {
  display: flex;
  padding: 5px 15px;
  border-bottom: 1px solid #eee;
  background: #f8f9ff;
  align-items: center;
}

.little-bear-event-l .el-menu {
  padding: 0 10px 5px;
  border-right: 0 none;
  width: 100%;
  border-top: 0 none;
  overflow: auto;
}

.little-bear-event-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 250px;
  font-size: 14px;
  overflow: hidden;
  white-space: pre-wrap;
}

.little-bear-event-item .little-bear-label {
  font-size: 12px;
  color: #aaaaaa;
}

.little-bear-event-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
}

.little-bear-event-method {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 225px;
  font-size: 14px;
  font-family: monospace;
  color: #9d238c;
  overflow: hidden;
  white-space: pre-wrap;
}

.little-bear-event-method > span:first-child,
.little-bear-fn-list-method > span:first-child {
  color: #9d238c;
}

.little-bear-event-method > span:first-child > span,
.little-bear-fn-list-method > span:first-child > span {
  color: #000;
  margin-left: 10px;
}

.little-bear-event-title .fc-icon {
  margin-right: 6px;
  font-size: 18px;
  color: #282828;
}

.little-bear-event-method .little-bear-label {
  margin-top: 4px;
  color: #aaaaaa;
  font-size: 12px;
}

.little-bear-event-l .el-menu-item {
  height: auto;
  line-height: 1em;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 0;
  margin-top: 5px;
}

.little-bear-event-l .el-menu-item.is-active {
  background: #e4e7ed;
  color: #303133;
}

.little-bear-fi-box {
  width: 150px;
  overflow: hidden;
}

.little-bear-font-input {
  display: flex;
  justify-content: center;
  padding: 0 5px;
}

.little-bear-font-input .el-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  grid-column-gap: 10px;
}

.little-bear-size-input {
  display: flex;
  align-items: center;
}

.little-bear-size-input .el-input-number--small {
  width: 122px;
}

.little-bear-font-input .little-bear-size-input .el-input-number--small {
  width: 100%;
}

.little-bear-size-input .el-button {
  font-size: 14px;
  padding: 5px;
  margin-left: 3px;
  width: 25px;
}

.little-bear-row {
  width: 100%;
}

.little-bear-child-empty {
  min-height: 130px;
}

.little-bear-child-empty:after {
  font-family: 'fc-icon' !important;
  content: var(--fc-child-empty);
}

.little-bear-drag-box .little-bear-drag-box {
  outline: 1px dashed #ececec;
}

.little-bear-drag-tool > .little-bear-drag-box {
  outline: none;
}

.little-bear-drag-box {
  width: 100%;
  height: 100%;
  min-height: 80px;
  transition:
    padding-bottom,
    padding-top 0.3s ease;
}
